<template>
  <n-scrollbar x-scrollable style="max-height: 125vh">
      <div style="width: 110%; flex-direction: row; display: flex; justify-content: space-evenly">
          <n-card size="small" class="second-column-card second-column-card-left shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>销售数据</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  更新至 {{currentTime}}（站点时间）
              </template>
              <n-flex justify="space-between">
                  <n-flex vertical>
                      <span>销售量</span>
                      <span>{{saleAmount}}</span>
                      <span>昨 {{saleAmountYesterday}}</span>
                  </n-flex>
                  <n-flex vertical>
                      <span>销售额</span>
                      <span>￥{{saleMoney}}</span>
                      <span>昨 ￥{{saleMoneyYesterday}}</span>
                  </n-flex>
                  <n-flex vertical>
                      <span>销售利润</span>
                      <span>￥{{saleProfit}}</span>
                      <span>昨 ￥{{saleProfitYesterday}}</span>
                  </n-flex>
                  <n-flex vertical>
                      <span>成本价</span>
                      <span>￥{{saleCost}}</span>
                      <span>昨 ￥{{saleCostYesterday}}</span>
                  </n-flex>
              </n-flex>
          </n-card>
          <n-card size="small" class="second-column-card second-column-card-right shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>物流统计</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  更新至 {{currentTime}}（站点时间）
              </template>
              <n-flex justify="space-between">
                  <n-flex vertical>
                      <span>总物流费用</span>
                      <span>￥{{logisticProviderCost}}</span>
                      <span>昨 ￥{{logisticProviderCostYesterday}}</span>
                  </n-flex>
                  <n-flex vertical>
                      <span>已送达物流订单数</span>
                      <span>{{logisticProviderOrderQuantity}}单</span>
                      <span>昨 {{logisticProviderOrderQuantityYesterday}}单</span>
                  </n-flex>
                  <n-flex vertical>
                      <span>已送达货物量</span>
                      <span>{{logisticProviderQuantity}}个</span>
                      <span>昨 {{logisticProviderQuantityYesterday}}个</span>
                  </n-flex>
              </n-flex>
          </n-card>
      </div>
      <div style="width: 110%; flex-direction: row; display: flex; justify-content: space-evenly">
          <n-card size="small" class="second-column-card second-column-card-left shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>仓库看板</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  <n-radio-group value="quantity" size="small">
                      <n-radio-button
                          class="left-button"
                          value="quantity"
                          label="数量"
                      />
                  </n-radio-group>
              </template>
              <div style="display: flex; flex-direction: row; justify-content: space-evenly">
                  <div style="width: 50%; align-items: center">
                      <div ref="pieContainer" style="width: 100%; height: 300px;"></div>
                  </div>
                  <div style="width: 46%;">
                      <n-flex justify="space-between">
                          <div class="fourth-left-right-div fourth-left-right-div-left">
                              <n-icon-wrapper :size="26" :border-radius="50" color="#4086FF">
                                  <n-icon :size="18">
                                      <icon-ic:sharp-storefront/>
                                  </n-icon>
                              </n-icon-wrapper>
                              <n-flex vertical  style="margin-left: 10px;">
                                  <span>正常货物数</span>
                                  <span>{{normalStoreCommodityCount}}个</span>
                              </n-flex>
                          </div>
                          <div class="fourth-left-right-div fourth-left-right-div-right">
                              <n-icon-wrapper :size="26" :border-radius="50" color="#B055ED">
                                  <n-icon :size="18">
                                      <icon-mdi:baby-carriage/>
                                  </n-icon>
                              </n-icon-wrapper>
                              <n-flex vertical  style="margin-left: 10px;">
                                  <span>异常货物数</span>
                                  <span>{{abnormalStoreCommodityCount}}个</span>
                              </n-flex>
                          </div>
                      </n-flex>
                      <n-table :single-line="false" style="margin-top: 20px; font-size: 13px;">
                          <thead>
                          <tr>
                              <th class="th-left"></th>
                              <th class="th-left">本地仓</th>
                              <th class="th-left">海外仓</th>
                              <th class="th-left">平台仓</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                              <td class="table-with-icon">
                                  货品种类
                                  <icon-zondicons:exclamation-outline style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                              </td>
                              <td>{{categoryCountLocal}}</td>
                              <td>{{categoryCountForeign}}</td>
                              <td>{{categoryCountPlatform}}</td>
                          </tr>

                          <tr>
                              <td class="table-with-icon">
                                  货品数量
                                  <icon-zondicons:exclamation-outline style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                              </td>
                              <td>{{commodityQuantityLocal}}</td>
                              <td>{{commodityQuantityForeign}}</td>
                              <td>{{commodityQuantityPlatform}}</td>
                          </tr>
                          <tr>
                              <td class="table-with-icon">
                                  期望数量
                                  <icon-zondicons:exclamation-outline style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                              </td>
                              <td>{{expectedCommodityQuantityLocal}}</td>
                              <td>{{expectedCommodityQuantityForeign}}</td>
                              <td>{{expectedCommodityQuantityPlatform}}</td>
                          </tr>
                          </tbody>
                      </n-table>
                  </div>
              </div>
          </n-card>
          <n-card size="small" class="second-column-card second-column-card-right shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>补货提醒</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <n-table :single-line="false" style="margin-top: 20px; font-size: 13px;">
                  <thead>
                  <tr>
                      <th style="display: flex; flex-direction: column; width: 151px;" class="diagonal-line">
                          <span class="align-end">
                            货物状态
                          </span>
                          <span class="align-start">
                            仓库类型
                          </span>
                      </th>
                      <th  class="th-right" style="background-color: #f0f8f1">
                          <span>
                              正常（货物数）
                              <icon-zondicons:exclamation-outline style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                          </span>
                          <th style="color: #00941e; background-color: #f0f8f1" class="th-right-text">{{normalCountLocal + normalCountForeign + normalCountPlatform}}</th>
                      </th>
                      <th  class="th-right"  style="background-color: #fff5e0">
                          <span>
                              缺货（货物数）
                              <icon-zondicons:exclamation-outline style="margin-left: 5px;"/>
                          </span>

                          <th style="color: #f27a00; background-color: #fff5e0" class="th-right-text">{{lackCountLocal + lackCountForeign + lackCountPlatform}}</th>
                      </th>
                      <th  class="th-right"  style="background-color: #fdf2f2;">
                          <span>
                              断货（货物数）
                              <icon-zondicons:exclamation-outline style="margin-left: 5px;"/>
                          </span>
                          <th style="color: #e52e2e; background-color: #fdf2f2;" class="th-right-text">{{emptyCountLocal + emptyCountForeign + emptyCountPlatform}}</th>

                      </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td class="table-with-icon">
                          本地仓
                      </td>
                      <td style="font-weight: bolder">{{normalCountLocal}}</td>
                      <td style="font-weight: bolder">{{lackCountLocal}}</td>
                      <td style="font-weight: bolder">{{emptyCountLocal}}</td>
                  </tr>
                  <tr>
                      <td class="table-with-icon">
                          海外仓
                      </td>
                      <td style="font-weight: bolder">{{normalCountForeign}}</td>
                      <td style="font-weight: bolder">{{lackCountForeign}}</td>
                      <td style="font-weight: bolder">{{emptyCountForeign}}</td>
                  </tr>
                  <tr>
                      <td class="table-with-icon">
                          平台仓
                      </td>
                      <td style="font-weight: bolder">{{normalCountPlatform}}</td>
                      <td style="font-weight: bolder">{{lackCountPlatform}}</td>
                      <td style="font-weight: bolder">{{emptyCountPlatform}}</td>
                  </tr>
                  </tbody>
              </n-table>
          </n-card>
      </div>
      <div style="width: 110%; flex-direction: row; display: flex; justify-content: space-evenly">
          <n-card size="small" class="third-column-card shadow-card" style="width: 96%;">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>物流数据趋势</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  更新至 {{currentTime}}（站点时间）
              </template>
              <div ref="lineContainer" style="width: 90%; height: 300px; margin-left: 10px;"></div>
          </n-card>
      </div>
      <div style="width: 110%; flex-direction: row; display: flex; justify-content: space-evenly">
          <n-card size="small" class="third-column-card third-column-card-left shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>站点数据</span>
                      <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  更新至 {{currentTime}}（站点时间）
              </template>
              <n-data-table
                  remote
                  :single-line="false"
                  ref="table"
                  :columns="columns"
                  :data="staticsList"
                  :loading="loading"
                  :max-height="250"
              />
          </n-card>
          <n-card size="small" class="third-column-card third-column-card-right shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>数值统计</span>
                      <icon-ic:baseline-keyboard-arrow-right/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <n-table :bordered="false">
                  <thead>
                  <tr>
                      <th></th>
                      <th>数量（个）</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td>角色类型</td>
                      <td>{{roleQuantity}}</td>
                  </tr>
                  <tr>
                      <td>人员数量</td>
                      <td>{{adminQuantity}}</td>
                  </tr>
                  <tr>
                      <td>店铺个数</td>
                      <td>{{shopQuantity}}</td>
                  </tr>
                  <tr>
                      <td>仓库个数</td>
                      <td>{{storeQuantity}}</td>
                  </tr>
                  </tbody>
              </n-table>
          </n-card>
      </div>
      <div style="width: 110%; flex-direction: row; display: flex; justify-content: space-evenly">
          <n-card size="small"  class="third-column-card third-column-card-left shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>全球地图</span>
                      <icon-ic:baseline-keyboard-arrow-right/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  <n-button>{{ date }}</n-button>
              </template>
              <div id="map-container" style="width: 100%;height: 300px;"></div>
          </n-card>
          <n-card size="small" class="third-column-card third-column-card-right shadow-card">
              <template #header>
                  <div style="display: flex; flex-direction: row; align-items: center">
                      <span>评论统计</span>
                      <icon-ic:baseline-keyboard-arrow-right/> <!-- 使用 Font Awesome 图标库作为示例 -->
                  </div>
              </template>
              <template #header-extra>
                  <n-button>{{date}}</n-button>
              </template>
              <span class="last-line-text">评价数量</span>
              <div style="background-color: #f7fdff; border: 1px solid #52bfff;border-radius: 6px; padding: 12px 16px; margin-top: 5px; margin-bottom: 25px;">
                  <n-flex justify="space-around">
                      <n-flex vertical ml-10 class="review-text">
                          <span style="font-weight: 550;">评价总数</span>
                          <span style="color: #52bfff; background-color: #f0f8f1" class="th-right-text">{{reviewQuantity}}</span>
                      </n-flex>
                      <n-flex vertical ml-25 class="review-text">
                          <span>今日评价数</span>
                          <span style="color: #52bfff; background-color: #f0f8f1" class="th-right-text">{{reviewQuantityToday}}</span>
                      </n-flex>
                  </n-flex>
              </div>
              <span class="last-line-text">评价星级</span>
              <div style="background-color: #fff5e0; border: 1px solid #f27a00aa;border-radius: 6px; padding: 12px 16px; margin-top: 5px;">
                  <n-flex style="margin-top: 10px; margin-bottom: 20px;" justify="space-around">
                      <n-flex vertical ml-25 class="review-text">
                          <span>1-3星级评价数</span>
                          <span style="color: #f27a00; background-color: #fff5e0" class="th-right-text">{{reviewOneToThreeQuantity}}</span>
                      </n-flex>
                      <n-flex vertical ml-10 class="review-text">
                          <span>4-5星级评价数</span>
                          <span style="color: #f27a00; background-color: #fff5e0" class="th-right-text">{{reviewFourToFiveQuantity}}</span>
                      </n-flex>
                  </n-flex>
              </div>
          </n-card>
      </div>
  </n-scrollbar>
</template>
<script setup>
import {h, onMounted, reactive, ref} from 'vue'
import * as echarts from 'echarts'
import L from "leaflet";
import "leaflet/dist/leaflet.css"
import StoreActions from "@/views/admin/category/components/category-actions.vue";
import api from "@/api/admin.js";

const saleAmount = ref(0)
const saleMoney=ref(0)
const saleProfit=ref(0)
const saleCost=ref(0)

const saleAmountYesterday = ref(0)
const saleMoneyYesterday=ref(0)
const saleProfitYesterday=ref(0)
const saleCostYesterday=ref(0)

const logisticProviderCost = ref(0)
const logisticProviderOrderQuantity = ref(0)
const logisticProviderQuantity = ref(0)

const logisticProviderCostYesterday=ref(0)
const logisticProviderOrderQuantityYesterday = ref(0)
const logisticProviderQuantityYesterday = ref(0)

const defaultEmptyList = [0,0,0,0,0,0,0,0,0,0,0,0]
const logisticsProviderCostInYear = ref(null)
const logisticsProviderQuantityInYear = ref(null)

const categoryCountLocal = ref(0);
const categoryCountForeign = ref(0);
const categoryCountPlatform = ref(0);

const commodityQuantityLocal = ref(0);
const commodityQuantityForeign = ref(0);
const commodityQuantityPlatform = ref(0);

const expectedCommodityQuantityLocal = ref(0);
const expectedCommodityQuantityForeign = ref(0);
const expectedCommodityQuantityPlatform = ref(0);

const normalStoreCommodityCount = ref(0);
const abnormalStoreCommodityCount = ref(0);

const normalCountLocal = ref(0);
const normalCountForeign = ref(0);
const normalCountPlatform = ref(0);
const lackCountLocal = ref(0);
const lackCountForeign = ref(0);
const lackCountPlatform = ref(0);
const emptyCountLocal = ref(0);
const emptyCountForeign = ref(0);
const emptyCountPlatform = ref(0);

const reviewQuantity = ref(0)
const reviewQuantityToday = ref(0)
const reviewOneToThreeQuantity = ref(0)
const reviewFourToFiveQuantity = ref(0)

const roleQuantity = ref(0)
const adminQuantity = ref(0)
const shopQuantity = ref(0)
const storeQuantity = ref(0)


const pieContainer = ref(null)
let pieChart = null
const pieData = ref([])
const pieOption = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '仓库数（个）',
            type: 'pie',
            data: pieData.value,
            radius: '65%',
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }

    ]
})
const lineContainer = ref(null)
let lineChart = null
const lineOption = ref({
    legend: {
        data: ['本月完成订单总数', '本月运输总费用']
    },
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '1%',
        right: '6%',
        bottom: '8%',
        top:'18%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        name:'日期',
        boundaryGap: false,
        data: getLastYear()
    },
    yAxis: [{
        type: 'value',
        name: '订单数(单)',
    },
    {
        type: 'value',
        name: '运输费用(元)', // 可以给y轴命名
        position: 'right', // 明确指定位置在右侧
    }],
    series: [
        {
            name: '本月完成订单总数',
            type: 'line',
            data: defaultEmptyList,
            markPoint: {
                data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                ]
            },
            markLine: {
                data: [{ type: 'average', name: 'Avg' }]
            }
        },
        {
            name: '本月运输总费用',
            type: 'line',
            data: defaultEmptyList,
            markPoint: {
                data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                ]
            },
            markLine: {
                data: [
                    { type: 'average', name: 'Avg' },
                    [
                        {
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        },
                        {
                            symbol: 'circle',
                            label: {
                                position: 'start',
                                formatter: 'Max'
                            },
                            type: 'max',
                            name: '最高点'
                        }
                    ]
                ]
            }
        }
    ]
});
const initMap = () => {
    let url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHVja2RvZyIsImEiOiJjbGdrNXZmNWkxY2NqM3BteWltcjYwaGl4In0.Xm_EO9lIxHAiCcpJx6FT1A'
    // var url = 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
    let layer = L.tileLayer(url, {
        maxZoom: 7,
        minZoom: 2,
        attribution: null
    })
    let map = L.map("map-container", {
        layers: [layer],
        /* center:[纬度,经度] */
        center: [30.50, 114.30],
        zoom: 2
    })
}
const nationList=ref([])
const staticsList=ref([])
const loading = ref(true)
const columns =[
    {
        key:'colId',
        title:'序号',
        width:30,
    },
    {
        key:'nation',
        title:'站点',
        width:30,
    },
    {
        key:'saleAmount',
        title:'销量（个）',
        width:30,
    },
    {
        key:'saleMoney',
        title:'销售额（元）',
        width:30,
    },
    {
        key:'saleProfit',
        title:'利润（元）',
        width:30,
    },
    {
        key:'customerCount',
        title:'客户数',
        width:30,
    }
]
const queryNationList = async () => {
    loading.value = true
    try {
        const res = await api.getNation()
        if(res.code === 200) {
            res.data.map((item,i)=>{
                nationList.value.push({
                    nation: item,
                })
            })
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取国家信息失败！")
    }finally{
        loading.value = false
    }
}
const queryStaticsList = async () => {
    loading.value = true
    try{
        let colId=1
        for (let nation of nationList.value){
            const res=await api.getSaleMoneyByNation({
                params: {
                    nation: nation.nation
                }
            })
            const res1=await api.getSaleAmountByNation(
                {params:{
                        nation:nation.nation
                    }})
            const res2=await api.getSaleProfitByNation(
                {params:{
                        nation:nation.nation
                    }})
            const res3=await api.getCustomerCountByNation(
                {params:{
                        nation:nation.nation
                    }})
            staticsList.value.push ({
                    colId:colId,
                    saleAmount: res1.data,
                    nation: nation.nation,
                    saleMoney:  res.data,
                    saleProfit:res2.data,
                    customerCount: res3.data
            })
            colId+=1
        }

    }catch (err){
        $message.error("统计数据失败！")
    }finally{
        loading.value = false
    }
}

function getLastYear() {
    let months = [];
    let currentDate = new Date();
    for (let i = 0; i < 12; i++) {
        currentDate.setDate(1);
        let year = currentDate.getFullYear();
        let month = currentDate.getMonth() + 1; // 加 1 以符合月份通常的表示方式（1-12）
        months.unshift(`${year}-${month.toString().padStart(2, '0')}`);
        currentDate.setMonth(currentDate.getMonth() - 1);
    }
    return months;
}
function getCurrentFormattedDateTime() {
    let now = new Date();
    let year = now.getFullYear();
    let month = String(now.getMonth() + 1).padStart(2, '0');
    let day = String(now.getDate()).padStart(2, '0');
    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');
    let seconds = String(now.getSeconds()).padStart(2, '0');
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}

const querySaleAmount = async () => {
    try {
        const res = await api.getSaleAmount()
        if(res.code === 200) {
            saleAmount.value = res.data
        }
    } catch (err) {
        $message.error("获取销售量失败！")
    }
}
const querySaleAmountYesterday = async () => {
    try {
        const res = await api.getSaleAmountInYesterday()
        if(res.code === 200) {
            saleAmountYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取销售量失败！")
    }
}

const querySaleMoney = async () => {
    try {
        const res = await api.getSaleMoney()
        if(res.code === 200) {
            saleMoney.value = res.data
        }
    } catch (err) {
        $message.error("获取销售额失败！")
    }
}
const querySaleMoneyYesterday = async () => {
    try {
        const res = await api.getSaleMoneyYesterday()
        if(res.code === 200) {
            saleMoneyYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取销售额失败！")
    }
}

const querySaleProfit = async () => {
    try {
        const res = await api.getSaleProfit()
        if(res.code === 200) {
            saleProfit.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}
const querySaleProfitYesterday = async () => {
    try {
        const res = await api.getSaleProfitYesterday()
        if(res.code === 200) {
            saleProfitYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}

const querySaleCost = async () => {
    try {
        const res = await api.getSaleCost()
        if(res.code === 200) {
            saleCost.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}
const querySaleCostYesterday = async () => {
    try {
        const res = await api.getSaleCostYesterday()
        if(res.code === 200) {
            saleCostYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}

const queryLogisticProviderCost = async () => {
    try {
        const res = await api.getLogisticProviderCost()
        if(res.code === 200) {
            logisticProviderCost.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}
const queryLogisticProviderCostYesterday = async () => {
    try {
        const res = await api.getLogisticProviderCostYesterday()
        if(res.code === 200) {
            logisticProviderCostYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取毛利润失败！")
    }
}

const getLogisticProviderOrderQuantity = async () => {
    try {
        const res = await api.getLogisticProviderOrderQuantity()
        if(res.code === 200) {
            logisticProviderOrderQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取已送达物流订单总数失败！")
    }
}
const getLogisticProviderOrderQuantityYesterday = async () => {
    try {
        const res = await api.getLogisticsProviderOrderQuantityInYesterday()
        if(res.code === 200) {
            logisticProviderOrderQuantityYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取昨日已送达物流订单总数失败！")
    }
}
const getLogisticProviderQuantity = async () => {
    try {
        const res = await api.getLogisticProviderOrderCommodityQuantity()
        if(res.code === 200) {
            logisticProviderQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取已送达货物总量失败！")
    }
}
const getLogisticProviderQuantityYesterday = async () => {
    try {
        const res = await api.getLogisticsProviderQuantityInYesterday()
        if(res.code === 200) {
            logisticProviderQuantityYesterday.value = res.data
        }
    } catch (err) {
        $message.error("获取昨日已送达货物总量失败！")
    }
}

const renderOption1 = async () => {
    try{
        await getLogisticsProviderCostInYear()
        await getLogisticsProviderOrderQuantityInYear()

        lineOption.value.series[0].data = logisticsProviderQuantityInYear.value
        lineOption.value.series[1].data = logisticsProviderCostInYear.value
        lineChart.setOption(lineOption.value)
    }catch (e) {
        console.log(e)
    }

}

const getLogisticsProviderCostInYear = async () => {
    try {
        const res = await api.getLogisticsProviderCostInYear()
        if(res.code === 200) {
            logisticsProviderCostInYear.value = res.data;
        }
    } catch (err) {
        $message.error("获取物流费失败！")
    }
}
const getLogisticsProviderOrderQuantityInYear = async () => {
    try {
        const res = await api.getLogisticsProviderOrderQuantityInYear()
        if(res.code === 200) {
            logisticsProviderQuantityInYear.value = res.data;
        }
    } catch (err) {
        $message.error("获取物流订单数失败！")
    }
}
const queryCategoryCountLocal = async () => {
    try {
        const res = await api.findCategoryCountByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            categoryCountLocal.value = res.data;
        }
    } catch (err) {
        $message.error("获取类别数失败！")
    }
}
const queryCategoryCountForeign = async () => {
    try {
        const res = await api.findCategoryCountByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            categoryCountForeign.value = res.data;
        }
    } catch (err) {
        $message.error("获取类别数失败！")
    }
}
const queryCategoryCountPlatform = async () => {
    try {
        const res = await api.findCategoryCountByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            categoryCountPlatform.value = res.data;
        }
    } catch (err) {
        $message.error("获取类别数失败！")
    }
}
const queryCommodityQuantityLocal = async () => {
    try {
        const res = await api.findStoreCommodityByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            commodityQuantityLocal.value = res.data;
        }
    } catch (err) {
        $message.error("获取库存数失败！")
    }
}
const queryCommodityQuantityForeign = async () => {
    try {
        const res = await api.findStoreCommodityByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            commodityQuantityForeign.value = res.data;
        }
    } catch (err) {
        $message.error("获取库存数失败！")
    }
}
const queryCommodityQuantityPlatform = async () => {
    try {
        const res = await api.findStoreCommodityByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            commodityQuantityPlatform.value = res.data;
        }
    } catch (err) {
        $message.error("获取库存数失败！")
    }
}
const queryExpectedCommodityQuantityLocal = async () => {
    try {
        const res = await api.findStoreMinimumCommodityByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            expectedCommodityQuantityLocal.value = res.data;
        }
    } catch (err) {
        $message.error("获取期望库存数失败！")
    }
}
const queryExpectedCommodityQuantityForeign = async () => {
    try {
        const res = await api.findStoreMinimumCommodityByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            expectedCommodityQuantityForeign.value = res.data;
        }
    } catch (err) {
        $message.error("获取期望库存数失败！")
    }
}
const queryExpectedCommodityQuantityPlatform = async () => {
    try {
        const res = await api.findStoreMinimumCommodityByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            expectedCommodityQuantityPlatform.value = res.data;
        }
    } catch (err) {
        $message.error("获取期望库存数失败！")
    }
}
const queryNormalStoreCommodityCount = async () => {
    try {
        const res = await api.findStoreCommodityCountByStatus({
            params: {
                status: "正常"
            }
        })
        if(res.code === 200) {
            normalStoreCommodityCount.value = res.data;
        }
    } catch (err) {
        $message.error("获取货物个数失败！")
    }
}
const queryAbnormalStoreCommodityCount = async () => {
    try {
        const res = await api.findStoreCommodityCountByStatus({
            params: {
                status: "异常"
            }
        })
        if(res.code === 200) {
            abnormalStoreCommodityCount.value = res.data;
        }
    } catch (err) {
        $message.error("获取货物个数失败！")
    }
}
const queryStoreCountByType = async () => {
    try {
        const res = await api.getStoreCountByType()
        if(res.code === 200) {
            res.data.map((item)=>{
                pieData.value.push({
                    value: item.storeCount,
                    name: item.type
                })
            })
            pieChart.setOption(pieOption.value)
        }
    } catch (err) {
        $message.error("获取仓库个数失败！")
    }
}
const findNormalCountLocal = async () => {
    try {
        const res = await api.findNormalCountByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            normalCountLocal.value = res.data
        }
    } catch (err) {
        $message.error("获取正常货物个数失败！")
    }
}
const findNormalCountForeign = async () => {
    try {
        const res = await api.findNormalCountByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            normalCountForeign.value = res.data
        }
    } catch (err) {
        $message.error("获取正常货物个数失败！")
    }
}
const findNormalCountPlatform = async () => {
    try {
        const res = await api.findNormalCountByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            normalCountPlatform.value = res.data
        }
    } catch (err) {
        $message.error("获取正常货物个数失败！")
    }
}
const findLackCountLocal = async () => {
    try {
        const res = await api.findLackCountByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            lackCountPlatform.value = res.data
        }
    } catch (err) {
        $message.error("获取缺货货物个数失败！")
    }
}
const findLackCountForeign = async () => {
    try {
        const res = await api.findLackCountByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            lackCountForeign.value = res.data
        }
    } catch (err) {
        $message.error("获取缺货货物个数失败！")
    }
}
const findLackCountPlatform = async () => {
    try {
        const res = await api.findLackCountByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            lackCountPlatform.value = res.data
        }
    } catch (err) {
        $message.error("获取缺货货物个数失败！")
    }
}
const findEmptyCountLocal = async () => {
    try {
        const res = await api.findEmptyCountByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            emptyCountPlatform.value = res.data
        }
    } catch (err) {
        $message.error("获取断货货物个数失败！")
    }
}
const findEmptyCountForeign = async () => {
    try {
        const res = await api.findEmptyCountByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            emptyCountForeign.value = res.data
        }
    } catch (err) {
        $message.error("获取断货货物个数失败！")
    }
}
const findEmptyCountPlatform = async () => {
    try {
        const res = await api.findEmptyCountByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            emptyCountPlatform.value = res.data
        }
    } catch (err) {
        $message.error("获取断货货物个数失败！")
    }
}
const getReviewCount = async () => {
    try {
        const res = await api.getReviewCount()
        if(res.code === 200) {
            reviewQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取评价总数失败！")
    }
}
const getReviewCountToday = async () => {
    try {
        const res = await api.getReviewCountToday()
        if(res.code === 200) {
            reviewQuantityToday.value = res.data
        }
    } catch (err) {
        $message.error("获取今日评价数失败！")
    }
}
const getOneToThreeReviewCount = async () => {
    try {
        const res = await api.getOneToThreeReviewCount()
        if(res.code === 200) {
            reviewOneToThreeQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取1-3星级评价数失败！")
    }
}
const getFourToFiveReviewCount = async () => {
    try {
        const res = await api.getFourToFiveReviewCount()
        if(res.code === 200) {
            reviewFourToFiveQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取4-5星级评价数失败！")
    }
}
const getRoleQuantity = async () => {
    try {
        const res = await api.roleCount()
        if(res.code === 200) {
            roleQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取角色总数失败！")
    }
}
const getAdminQuantity = async () => {
    try {
        const res = await api.adminCountNeedToken()
        if(res.code === 200) {
            adminQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取管理员总数失败！")
    }
}
const getShopQuantity = async () => {
    try {
        const res = await api.shopCount()
        if(res.code === 200) {
            shopQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取店铺总数失败！")
    }
}
const getStoreQuantity = async () => {
    try {
        const res = await api.storeCount()
        if(res.code === 200) {
            storeQuantity.value = res.data
        }
    } catch (err) {
        $message.error("获取仓库总数失败！")
    }
}
const currentTime = ref(getCurrentFormattedDateTime());
function getCurrentYearAndWeekNumberWithDay() {
    let now = new Date();
    let year = now.getFullYear();
    let dayOfYear = getDayOfYear(now);
    let dayOfWeek = now.getDay();
    if (dayOfYear < (1 + (7 - dayOfWeek))) {
        year--;
        dayOfYear += 365 + ((year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) ? 1 : 0); // 加上上一年的天数，考虑闰年  
    }
    let weekNumber = Math.ceil((dayOfYear + 7 - dayOfWeek) / 7);
    let weekDays = ['日', '一', '二', '三', '四', '五', '六'];
    let weekDayCN = weekDays[dayOfWeek];
    return `${year}年第${weekNumber}周 周${weekDayCN}`;
}
function getDayOfYear(date) {
    let start = new Date(date.getUTCFullYear(), 0, 0);
    let diff = date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000);
    let oneDay = 1000 * 60 * 60 * 24;
    return Math.floor(diff / oneDay);
}
const date = ref(getCurrentYearAndWeekNumberWithDay())
onMounted(() => {
    pieChart = echarts.init(pieContainer.value)
    pieChart.setOption(pieOption.value)
    lineChart = echarts.init(lineContainer.value)
    lineChart.setOption(lineOption.value)
    querySaleAmount()
    querySaleMoney()
    querySaleProfit()
    querySaleCost()

    queryLogisticProviderCost()
    getLogisticProviderOrderQuantity();
    getLogisticProviderQuantity();

    querySaleAmountYesterday()
    querySaleMoneyYesterday()
    querySaleProfitYesterday()
    querySaleCostYesterday()

    queryLogisticProviderCostYesterday()
    getLogisticProviderOrderQuantityYesterday()
    getLogisticProviderQuantityYesterday()
    
    findNormalCountLocal()
    findNormalCountForeign()
    findNormalCountPlatform()
    findLackCountLocal()
    findLackCountForeign()
    findLackCountPlatform()
    findEmptyCountLocal()
    findEmptyCountForeign()
    findEmptyCountPlatform()

    renderOption1();
    queryCategoryCountLocal()
    queryCategoryCountForeign()
    queryCategoryCountPlatform()
    queryCommodityQuantityLocal()
    queryCommodityQuantityForeign()
    queryCommodityQuantityPlatform()
    queryNormalStoreCommodityCount()
    queryAbnormalStoreCommodityCount()
    queryExpectedCommodityQuantityLocal()
    queryExpectedCommodityQuantityForeign()
    queryExpectedCommodityQuantityPlatform()
    initMap()
    queryStoreCountByType()

    queryNationList().then(()=>{
        queryStaticsList()
    })

    getReviewCount()
    getReviewCountToday()
    getOneToThreeReviewCount()
    getFourToFiveReviewCount()

    getRoleQuantity()
    getAdminQuantity()
    getShopQuantity()
    getStoreQuantity()
})

</script>
<style scoped>
.second-column-card {
    margin-top: 20px;
}
.second-column-card-left {
    width: 47%;
}
.second-column-card-right {
    width: 47%;
}
.shadow-card {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: box-shadow 0.3s ease; /* 阴影变化的过渡效果 */
}
/* 当鼠标悬停在卡片上时，可以加深阴影效果以增加交互性 */
.shadow-card:hover {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
}
.third-column-card {
    margin-top: 20px;
}
.third-column-card-left {
    width: 68%;
}
.third-column-card-right {
    width: 26%;
}
.fourth-column-card {
    margin-top: 20px;
}
.fourth-column-card-left {
    width: 42%;
}
.fourth-column-card-middle {
    width: 26%;
}
.fourth-column-card-right {
    width: 26%;
}
.button-with-icon {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，可以根据需要调整 */
}
.table-with-icon {
    margin-left: 2px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: left; /* 水平居中，可以根据需要调整 */
}
.icon-material-symbols {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
}
.left-button {
    border-top-left-radius: 5px; /* 或者您想要的任何圆角大小 */
    border-bottom-left-radius: 5px;
}

.right-button {
    border-top-right-radius: 5px; /* 或者您想要的任何圆角大小 */
    border-bottom-right-radius: 5px;
}
.fourth-left-right-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    padding: 10px 15px;
}
.fourth-left-right-div-left {
    background-color: rgb(240, 245, 254);
    border: 1px solid rgb(148, 187, 255);
}
.fourth-left-right-div-centre {
    background-color: #fff5e0;
    border:1px solid #b8b226;
}
.fourth-left-right-div-right {
    background-color: rgb(253, 250, 255);
    border: 1px solid rgb(222, 173, 255);
}
.th-left {
    font-weight: bolder;
}
.th-right {
    width: 25%;
    font-weight: bolder;
    font-size: 14px;
    line-height: 22px;
    color: #000000a6;
    align-items: center;
}
.review-text {
    width: 35%;
    font-weight: bolder;
    font-size: 14px;
    line-height: 22px;
    color: #000000a6;
    align-items: center;
}
.th-right-text{
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}
.align-end {
    align-self: flex-end;
    margin-bottom: 10px; /* 或者根据你的设计调整 */
}

.align-start {
    align-self: flex-start;
    margin-top: 10px; /* 或者根据你的设计调整 */
}
.diagonal-line {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        30deg,
        #d9dbde,
        #d9dbde 1px,
        transparent 1px,
        transparent 50%
    );
    pointer-events: none; /* 确保直线不可点击 */
}
.last-line-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 8px;
    text-transform: capitalize;
    color: #000;
    cursor: pointer;
}
</style>
